
// import './App.css'
import { useMemo, useState } from 'react'

const getCount = (count)=>{
    
    console.log('执行昂贵的计算');
    console.timeEnd('计算耗时');
    let result = 0;
    for(let i = 0; i < count * 1000000000; i++){
        result += i
    }
    return result
}

const ExampleComponent = ()=>{
    console.log('ExampleComponent render');
    const [count, setCount] = useState(0)
    // const expensiveCalculation = getCount(count)

    const expensiveCalculation = useMemo(()=>{
        console.log('执行昂贵的计算');

        let result = 0;
        for(let i = 0; i < count * 1000000000; i++){
            result += i
        }
        console.timeEnd('计算耗时');
        return result
        
    },[count])

    const incrementCount = ()=>{
        setCount(prevCount => prevCount +1)
    }

    const dec = ()=>{
        setCount(prevCount => prevCount -1)
    }

    return (
        <div>
            <p>Count:{count}</p>
            <p>Expensive Calculation:{expensiveCalculation}</p>
            <button onClick={incrementCount}>子:Increment</button>
            <button onClick={dec}>子:dec</button>
        </div>
    )
}

function App(){
    const [count, setCount] = useState(0)

    return(
        <div className='App'>
            <button onClick={()=> setCount(count+1)}>父:加加一一</button>
            {count}
            <ExampleComponent />
        </div>
    )
}

export default App